import React, { useEffect, useState } from 'react';
import { Space, Table, Tooltip, Button, Switch, Popconfirm, Form, Input } from "antd";
import { FormOutlined, DeleteOutlined, SearchOutlined } from "@ant-design/icons";
import { useAppDispatch } from "@/hooks";
import { getHospitalSetAsync, getHospitalSetLockByIdAsync, useSelectorHosp, deleteHospitalSetByIdAsync, deleteHospitalSetBatchRemoveAsync, changeParams } from "@/store/slices/hosp";
import { useSelectorCommon } from "@/store/slices/common";
import SetModal from "@/pages/hospital/hospitalSet/components/SetModal";
const Item = Form.Item;

function Index() {
    const [form] = Form.useForm();
    const dispatch = useAppDispatch();
    // 定义一个用于指定modal是否弹出的状态isModalOpen
    const [isModalOpen, setIsModalOpen] = useState(false);
    //定义弹框标题
    const [modalTitle, setModalTitle] = useState("添加医院设置");
    const { hospitalSetList } = useSelectorHosp();
    const { pageInfo, loading } = useSelectorCommon();
    //弹框表单信息 初始值为空
    const [info, setInfo] = useState(null);
    // 保存选择好的数据ID列表
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 批量删除加载中
    const [delLoading, setDelLoading] = useState(false);

    useEffect(() => {
        dispatch(getHospitalSetAsync(1, 4));
    }, [])
    return (
        <div>
            <Space style={{ marginBottom: 16 }}>
                <Button type={"primary"} onClick={() => {
                    setModalTitle("添加医院设置");
                    setIsModalOpen(true);
                }}>添加医院设置</Button>

                <Button type="primary" onClick={async () => {
                    setDelLoading(true);
                    await dispatch(deleteHospitalSetBatchRemoveAsync(selectedRowKeys));
                    setSelectedRowKeys([]);
                    setDelLoading(false);
                }} disabled={selectedRowKeys.length == 0} loading={delLoading} >
                    批量删除
                </Button>


                <Form
                    form={form}
                    name={"searchHospital"}
                    layout={"inline"}
                    autoComplete={"off"}
                    onFinish={(values: any) => {
                        dispatch(changeParams(values));
                        dispatch(getHospitalSetAsync(1, 4));
                    }}
                >
                    <Item name={"hosname"}>
                        <Input placeholder={'请输入医院名称关键字'} />
                    </Item>
                    <Item name={"hoscode"}>
                        <Input placeholder={'请输入医院编码'} />
                    </Item>

                    <Item>
                        <Button icon={<SearchOutlined />} type={'primary'} htmlType={'submit'}>搜索</Button>
                    </Item>

                    <Item>
                        <Button
                            htmlType={'button'}
                            onClick={() => {
                                //清空表单
                                form.resetFields();
                                dispatch(changeParams({}));
                                dispatch(getHospitalSetAsync(1, 4));
                            }}
                        >重置</Button>
                    </Item>

                </Form>

            </Space>
            <Table
                rowSelection={{
                    selectedRowKeys,
                    onChange(newSelectedRowKeys: React.Key[]) {
                        setSelectedRowKeys(newSelectedRowKeys);
                    },
                }}
                loading={loading}
                pagination={{
                    ...pageInfo,
                    onChange(page, pageSize) {
                        dispatch(getHospitalSetAsync(page, pageSize));
                    }
                }}


                // 增加边框
                bordered={true}
                // 指定横向的宽度
                scroll={{
                    x: 1500
                }}
                // rowSelection={rowSelection}
                columns={[
                    {
                        title: "序号",
                        align: "center",
                        width: 70,
                        // dataIndex:"id",
                        // 如果设置了dataIndex,那么render的第一个形参即是dataIndex对应的属性值
                        // 如果未设置dataIndex,那么render的第一个形参即是行信息

                        // 第二个参数是行信息
                        render(value, rows, index) {
                            console.log(index)
                            return (pageInfo.current - 1) * pageInfo.pageSize + index + 1;
                        }
                    }, {
                        title: "医院名称",
                        align: "center",
                        ellipsis: true,
                        width: 200,
                        dataIndex: "hosname"
                    }, {
                        title: "医院编号",
                        align: "center",
                        width: 140,
                        ellipsis: true,
                        dataIndex: "hoscode"
                    }, {
                        title: "是否锁定",
                        align: "center",
                        // dataIndex:"status",// 0：锁定 1：未锁定
                        render(rows) {
                            return (
                                <Switch checked={rows.status === 0} onChange={() => {
                                    dispatch(getHospitalSetLockByIdAsync(rows.id, rows.status));
                                }} />
                            )
                        }

                    }, {
                        title: "api基础地址",
                        align: "center",
                        width: 140,
                        dataIndex: "apiUrl"
                    }, {
                        title: "密钥",
                        align: "center",
                        width: 140,
                        ellipsis: true,
                        dataIndex: "signKey"
                    }, {
                        title: "联系人姓名",
                        align: "center",
                        dataIndex: "contactsName"
                    }, {
                        title: "联系人手机",
                        align: "center",
                        dataIndex: "contactsPhone"
                    }, {
                        title: "添加时间",
                        align: "center",
                        width: 160,
                        dataIndex: "createTime"
                    }, {
                        title: "修改时间",
                        align: "center",
                        width: 160,
                        dataIndex: "updateTime"
                    }, {
                        title: "操作",
                        fixed: "right",
                        // dataIndex:"updateTime"
                        render(rows) {
                            return (
                                <Space>
                                    <Popconfirm
                                        placement="topRight"
                                        title={"您确定要删除" + rows.hosname + "吗"}
                                        onConfirm={() => {
                                            dispatch(deleteHospitalSetByIdAsync(rows.id));
                                        }}
                                        okText="是"
                                        cancelText="否"
                                    >
                                        <Tooltip title="修改">
                                            <Button onClick={() => {
                                                //设置弹框表单信息
                                                setInfo({ ...rows }); //扩展运算符复制一份（引用数据）
                                                //设置弹框标题--修改
                                                setModalTitle("修改医院设置");
                                                setIsModalOpen(true); //是否弹框
                                            }}
                                                type="primary" shape="circle" icon={<FormOutlined />} />
                                        </Tooltip>
                                        <Tooltip title="删除">
                                            <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} />
                                        </Tooltip>
                                    </Popconfirm>
                                </Space>
                            )
                        }
                    }
                ]}
                rowKey={"id"}
                dataSource={hospitalSetList}
            />
            <SetModal setIsModalOpen={setIsModalOpen} isModalOpen={isModalOpen} />
        </div>
    );
}

export default Index;